import React, { Component } from 'react'
import './style.css';

export default class OrderItem extends Component {

    constructor(props) {
        super(props);
    
        this.state = {
            editing: false,
            comment: props.order.comment || '',
            stars: props.order.stars || 0
        }
    }
    

    render() {
        const { shop, product, price, picture, ifCommendted} = this.props.order;
        return (
            <div className="orderItem">
                <div className="orderItem__picContainer">
                    <img className="orderItem__pic" src={picture} alt="" />
                </div>
                <div className="orderItem__content">
                    <div className="orderItem__product">{product}</div>
                    <div className="orderItem__shop">{shop}</div>
                    <div className="orderItem__detail">
                        <div className="orderItem__price">{price}</div>
                        <div>
                            {
                                ifCommendted ? (
                                    <button className="orderItem__btn orderItem__btn--grey">已评价</button>
                                ): (
                                    <button className="orderItem__btn orderItem__btn--red" onClick={this.handleOpenEditArea}>评价</button>
                                )
                            }
                        </div>
                    </div>
                </div>
                {this.state.editing && this.renderEditArea()}
            </div>
        );
    }
    // 抽象出新的方法，完成额外的dom节点的描述

    /**
     * 绘制出用于评价订单的ui
     */
    renderEditArea() {
        return (
            <div className="orderItem__commentContainer">
                <textarea 
                  className="orderItem__comment"
                  onChange={this.handleCommentChange}
                  value={this.state.comment}
                />
                {this.renderStars()}
                <button className="orderItem__btn orderItem__btn--red" onClick={this.handleCommentSubmit}>提交</button>
                <button className="orderItem__btn orderItem__btn--grey" onClick={this.handleCommentCancel}>取消</button>
            </div>
        );
    }

    /**
     * 绘制出五星好评区域的UI
     */
    renderStars() {
        const { stars } = this.state;
        // const counts = [1,2,3,4,5];
        return (
            <div>
                {
                    [1,2,3,4,5].map((item, index) => {
                        const lightClass = item <= stars ? "orderItem__star--light" : "";
                        return (
                            <span 
                              className={"orderItem__star " + lightClass}
                              key={index}
                              onClick={this.handleClickStars.bind(this, item)}
                            >
                                ★
                            </span>

                        );
                    })
                }
            </div>
        );
    }

    /**
     * 评价触发
     */
    handleOpenEditArea = () => {
        this.setState({
            editing: true
        });
    }

    /**
     * 编辑评价
     */
    handleCommentChange = (e) => {
        this.setState({
            comment: e.target.value
        });
    }

    /**
     * 星星评价
     */
    handleClickStars = (stars) => {
        this.setState({
            stars
        })
    }

    /**
     * 提交评价
     */
    handleCommentSubmit = () => {
        console.log('handleCommentSubmit');
        // todo: 将评价信息提交到服务器
        const { id } = this.props.order;
        const {comment, stars} = this.state;
        this.setState({
            editing: false
        });
        // OrderList来提交评价信息
        this.props.onSubmit(id, comment, stars);
    }

    /**
     * 取消评价
     */
    handleCommentCancel = () => {
        console.log('handleCommentCancel');
        this.setState({
            editing: false,
            comment: this.props.order.comment || '',
            stars: this.props.order.stars || 0
        })
    }
}

